<!--
 * @Author: huangximian huangximian@e-ling.com.cn
 * @Date: 2022-05-27 17:21:10
 * @LastEditors: huangximian huangximian@e-ling.com.cn
 * @LastEditTime: 2022-06-06 10:27:17
 * @FilePath: \jcyy-official-website\src\views\android\pages\aboutJinChun\aboutindex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="aboutJin">
    <div class="home_img">
      <img src="@/assets/images/site/solution.png" alt="" />
      <div class="banner_info">
        <div class="title">Home charging solutions</div>
        <div class="des">Recharge at home, more convenient</div>
        <div class="btn">Contact Us</div>
      </div>
    </div>
    <div class="content_android">

      <!-- 企业荣誉 -->
      <div class="tab_one">
        <div class="tab_one_title">A fast charging solution for MURBs</div>
        <div class="tab_one_foldlist">
          <div class="tab_one_img">
              <img src="@/assets/images/site/changeLT.png" style="width:100%;height:100%" alt="" />
          </div>
          <div class="tab_one_text">
          ChargePlex offers a hassle-free solution to meet the growing demand for EV charging. Our turnkey service includes installation, maintenance, and management of the charging stations, relieving property managers of the technical and operational burdens. By partnering with ChargePlex, property managers can enhance the value and attractiveness of their properties, increase tenant satisfaction, and generate additional revenue through our revenue sharing model.
          </div>  
        </div>
        <div class="tab_one_foldlist">
          <div class="tab_one_img">
              <img src="@/assets/images/site/changeRT.png" style="width:100%;height:100%" alt="" />
          </div>
          <div class="tab_one_text">
          ChargePlex's solution directly addresses the pain points experienced by MURB residents. By providing convenient, reliable, and fast EV charging options within their buildings, we eliminate the need for residents to rely on slow Level 1 charging or search for public charging stations. Our user-friendly mobile app and 24/7 customer support ensure a seamless charging experience, making EV ownership more accessible and attractive for MURB residents.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "aboutJin",
  data() {
    return {
      tablist: [
        {
          name: "品牌介绍",
          booer: true,
          id: "1",
        },
        {
          name: "文化理念",
          booer: false,
          id: "2",
        },
        {
          name: "发展历程",
          booer: false,
          id: "3",
        },
        {
          name: "企业荣誉",
          booer: false,
          id: "4",
        },
        {
          name: "合作伙伴",
          booer: false,
          id: "5",
        },
      ],
      id: 0,
      locationg: "",
    };
  },
  watch: {
    id(e) {
      console.log(e);
    },
  },
  methods: {
    tabli() {
      return this.tablist;
    },
    tabstate(vlaue) {
      for (const a of this.tablist) {
        if (a.id == vlaue.id) {
          a.booer = true;
        } else {
          a.booer = false;
        }
      }
      this.id = vlaue.id;
    },
  },
};
</script>
<style scoped>
.content_android {
  margin: 1.2rem 1.5rem 4rem 1.5rem;
  overflow: hidden;
}
.home_img {
  width: 100%;
  height: 17rem;
}
.home_img .banner_info{
  position: absolute;
  left:0;
  top:40px;
  width:100%;
  text-align: center;
  color: #FFFFFF;
}
.banner_info .title{
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
}
.banner_info .des{
  opacity: 0.6;
  font-size: 12px;
  margin-bottom: 30px;
}
.banner_info .btn{
  width:100px;
  margin: 0 auto;
  text-align: center;
  padding: 5px 0;
  background: #FF6C01;
  border-radius: 65px;
  font-size: 12px;
}
.home_img img {
  width: 100%;
  height: 100%;
}
.tabswitch {
  display: inline-flex;
  text-align: center;
  overflow: hidden;
  line-height: 3rem;
  margin-top: 1rem;
  border-bottom: 2px solid rgba(247, 139, 15, 1);
}
.tabswitch div {
  width: 8.6rem;
  height: 3rem;
  opacity: 1;
  font-size: 1.4rem;
}
.tabsuw {
  background: #f78b0f;

  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.4rem;
}
.tab_p {
  font-size: 1.7rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #d51010;
  /* line-height: 28px; */
}
.tab_three_p {
  font-size: 1.4rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #d51010;
  /* line-height: 22px; */
}
.tab_three_tow {
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  /* line-height: 22px; */
  margin-top: 0.8rem;
}
.tab_p_tow {
  font-size: 1rem;
  font-family: Arial-Regular, Arial;
  font-weight: 400;
  color: #d51010;
  margin-top: 0.3rem;
}

.tab_ont_text{
  color: #3D3D3D;
  font-size: 12px;
}
.tab_one .tab_one_title{
  color: #000000;
  font-size: 24px;
  font-weight: 600;
  margin: 10px 0;
  width:100%;
  text-align: center;
}
.tab_button {
  padding: 1.2rem;
  background: #ffffff;
  box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;
  opacity: 1;
  border: 1px solid #ffffff;
}
.tab_button p:nth-child(1) {
  font-size: 1.4rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 换行2段 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
hr {
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 0px 0px;
  margin-top: 0.8rem;
}
.tab_button p:nth-child(3) {
  font-size: 1.1rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 0.8rem;
}
.tab_one {
  /* margin-top: 2rem; */
}
.tab_three {
  margin-top: 1.6rem;
}
.tab_one_foldlist {
  width:100%;
  margin-bottom: 20px;
}
.tab_one_img{
  width:100%;
  margin-bottom: 5px;
}
.tab_one_foldlist .tab_one_text{
  color: #3D3D3D;
  font-size: 12px;
  line-height: 20px;
}
.tab_one_foldlist_div {
  width: 16.8rem;
  /* height: 14rem; */
  /* margin-top: 1.6rem; */
}
.tab_two_nei {
  margin-top: 1.6rem;
}
.tab_two_nei p {
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 2.2rem;
}
.tab_two_img {
  margin-top: 1.6rem;
  text-align: center;
}
.tab_two_img img {
  width: 19.3rem;
  height: 19.3rem;
}
.tab_five {
  margin-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tab_five_div {
  width: 16.8rem;
  /* height: 15.2rem; */
  margin-top: 1.6rem;
  /* background: #d51010; */
}
.tab_five_div_img {
  width: 16.8rem;
  height: 5.5rem;
  margin: 3rem 0rem 3rem 0rem;
  box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;
  opacity: 1;
  border: 1px solid #ffffff;
  background: #ffffff;
}
.tab_five_div_img img {
  width: 100%;
  height: 100%;
  /* width: 16.8rem;
  height: 6.5rem; */
  /* margin: 3rem 0rem 3rem 0rem; */
  /* box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;
  opacity: 1;
  border: 1px solid #ffffff;
  background: #ffffff; */
}
.tab_five_div_tiele {
  font-size: 1.4rem;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
  background: #ffffff;

  box-shadow: inset -1px -2px 4px 1px rgb(0 0 0 / 10%);
  border-radius: 0px 0px 2px 2px;

  opacity: 1;
  border: 1px solid #ffffff;
  padding: 1.2rem;
}
</style>
<style>
.van-tabs__nav--card {
  box-sizing: border-box;
  height: 30px;
  margin: 0 !important;
  border: 1px solid #ee0a24;
  border-radius: 2px;
}
.van-tabs__nav--card .van-tab {
  color: #ee0a24;
  border-right: none !important;
}
.van-tabs__nav--card {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 30px;
  margin: 0 !important;
  border: none !important;
  border-bottom: 2px solid rgba(247, 139, 15, 1) !important;
  border-radius: 2px;
}
.van-tab__text--ellipsis {
  display: -webkit-box;
  /* overflow: hidden; */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  /* margin: 10px; */
  width: 9.6rem !important;
  text-align: center;
}
.van-tabs__nav--card .van-tab.van-tab--active {
  color: #fff;
  background-color: #ee0a24;
  width: 9.6rem !important;
}
.tab_date {
  display: flex;
  margin-top: 1.2rem;
}
.tab_date div:nth-child(1) {
  width: 5.2rem;
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
}
.tab_date div:nth-child(2) {
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 1rem;
}
</style>